<template>
  <div>
    <!-- from -->
    <!-- 标题 -->
    <el-form :model="fromData" ref="ruleForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="标题" prop="name">
        <el-input v-model="fromData.title"></el-input>
      </el-form-item>

      <!-- 栏目 -->
      <el-form-item label="栏目" prop="name">
        <el-checkbox-group v-model="fromData.categories">
          <el-checkbox
            v-for="(item,index) of categoriesList"
            :key="index"
            :label="item.id"
          >{{item.name}}</el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 富文本 -->
      <el-form-item label="内容" prop="name">
        <!-- npm install vue2-editor  -S -->
        <vue-editor
          v-model="fromData.content"
          :useCustomImageHandler="true"
          @image-added="imgUpload"
        ></vue-editor>
      </el-form-item>

      <!-- 类型 -->
      <el-form-item label="类型" prop="name">
        <el-radio-group v-model="fromData.type">
          <el-radio :label="1">图片</el-radio>
          <el-radio :label="2">视频</el-radio>
        </el-radio-group>
      </el-form-item>

      <!-- 上传 -->
      <el-form-item label="上传" prop="name">
        <el-upload
           :file-list="fromData.cover"
          :action="$axios.defaults.baseURL+'/upload'"
          :headers="{ Authorization:token}"
          list-type="picture-card"
          :on-remove="handleRemove"
          :on-success="handlSuccess"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>

      <!-- 按钮 -->
      <el-form-item label="选项" prop="name">
        <el-button type="primary" @click="snedPostClick">确定</el-button>
        <el-button type="info">取消</el-button>
      </el-form-item>
    </el-form>
    <!-- from -->
  </div>
</template>

<script>
import { VueEditor } from "vue2-editor";
export default {
  data() {
    return {
      token: localStorage.getItem("token"),
      fromData: {
        title: "",
        categories: [],
        content: "",
        cover: [],
        type: 1
      },
      categoriesList: []
    };
  },
  methods: {
    handleRemove(file, fileList) {
      this.fromData.cover = fileList;
    },
    // 成功
    handlSuccess(res, file, fileList) {
      // 当前文件添加数据
      file.id = res.data.id;
      // 动态url
      file.url = this.$axios.defaults.baseURL + res.data.url;
      this.fromData.cover.push(file);
    },
    // 富文本图片
    imgUpload(file, Editor, cursorLocation, resetUploader) {
      console.log("file: ", file);
      //file 文件
      //       - Editor 指的是编辑框本身
      // - cursorLocation 指的是当前光标所在位置
      // - resetUploader 上传完毕必须执行的一个复位函数
      const fromData = new FormData();
      fromData.append("file", file);
      this.$axios({
        method: "post",
        url: "/upload",
        data: fromData
      }).then(res => {
        const { data } = res.data;
        console.log("data.url: ", data.url);
        // 图片地址就在 data.url 当中
        //  ! 拼接完整地址
        const url = this.$axios.defaults.baseURL + data.url;
        // 要把这张图片放入编辑器的光标所在位置
        // 下面是富文本框的固定 api 写法
        Editor.insertEmbed(cursorLocation, "image", url);
        // 另一个固定写法，插入图片后必须复原上传组件
        resetUploader();
        // 看富文本的字 和 img
        console.log("this.content: ", this.content);
      });
    },
    // 获取栏目
    get_category() {
      this.$axios({
        method: "get",
        url: "/category"
      }).then(res => {
        const { data } = res.data;
        if (data[0].id == 0) {
          data.shift();
          data.shift();
        }

        this.categoriesList = data;
        // console.log(this.fromData.categories);
      });
    },
    // 发布文章
    snedPostClick() {

if (this.$route.query.id) {
  this.$axios({
    method:'post',
    url:'/post_update/'+this.$route.query.id,
    data:this.fromData
  }).then(res=>{
      this.$message({
      message: res.data.message,
      type: "success"
    });
  })

}else{
    const newFromData = { ...this.fromData };
  const newCategories = [];
  this.fromData.categories = this.fromData.categories.map(item => {
    newCategories.push({ id: item });
  });
   newFromData.categories = newCategories;
  this.$axios({
    method: "post",
    url: "/post",
    data: newFromData
  }).then(res => {
    this.$message({
      message: res.data.message,
      type: "success"
    });
  });

}

    },
    // 编辑文章获取列表
    editPostList() {
      this.$axios({
        method: "get",
        url: "post/" + this.$route.query.id
      }).then(res => {
        const { data } = res.data;

     // 判断url
        data.cover.forEach((item,index) => {
          item.uid = index
            if (item.url.indexOf("http") < 1) {
              item.url = this.$axios.defaults.baseURL + item.url;
            }
        });



        this.fromData = data;
        console.log(this.fromData.cover);
        
      });
    }
  },
  mounted() {
    if (this.$route.query.id) {
      this.editPostList();
    } else {
      this.get_category();
    }
  },
  components: {
    VueEditor
  }
};
</script>

<style>
</style>